<template>
  <div class="goods">
    <el-form :inline="true" :model="listQuery">
      <el-form-item label="">
        <el-input
          style="min-width: 230px"
          v-model="listQuery.name"
          placeholder="输入出库单编号"
          clearable
          size="small"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click.native="handleFilter"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-check"
          size="mini"
          @click="handleSelection"
          >确定</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="danger" size="mini" @click="handleCancel"
          >取消</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      :data="datas"
      border
      v-loading="listLoading"
      fit
      highlight-current-row
      style="width: 600"
      size="small"
      height="400"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column
        v-for="column in tableColumns"
        :key="column.key"
        :label="column.title"
        :prop="column.key"
        :align="column.align"
        :width="column.width ? column.width : ''"
        :formatter="dataFormatter"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getSaleOrderCodeList } from "@/api/sale";
import { getPrepaymentList } from "@/api/finance";
import { getCustomerPointsList } from "@/api/points";

export default {
  name: "SaleOrderCode",
  props: ["dlgCodeVisible"],
  data() {
    return {
      tableColumns: [
        {
          key: "code",
          title: "单据编号",
          width: "140",
        },
        {
          key: "order_time",
          title: "订单时间",
          width: "100",
          align: "center"
        },
        {
          key: "customer_name",
          title: "客户名称",
          width: "160",
        },
        {
          key: "saler_name",
          title: "销售员",
          align: "center",
          width: "100",
        },
        {
          key: "total_amount",
          title: "总金额",
          width: "100",
          align: "center"
        },
        {
          key: "amount",
          title: "销售已收金额",
          width: "100",
          align: "center"
        },
        {
          key: "norecv_amount",
          title: "未付款金额",
          width: "100",
          align: "center"
        },
        {
          key: "flag_name",
          title: "单据类型",
          width: "100",
          align: "center"
        },
        {
          key: "remark",
          title: "备注",
          width: "180",
        },
      ],

      title: "选择销售出库订单",
      datas: [],
      selections: [],

      listLoading: true,

      listQuery: {
        name: "",
        customer: null,
      },

    };
  },

  methods: {
    init_data(customer_id) {
      this.datas = [];
      this.listQuery.customer = customer_id;
      this.getSaleOrderList();
  
    },

    handleSelection() {
      this.$emit("update:dlgCodeVisible", false);
      this.$emit("selections", this.selections);
    },

    handleCancel() {
      this.$emit("update:dlgCodeVisible", false);
    },


    async getSaleOrderList() {
      this.listLoading = true;
      const res = await getSaleOrderCodeList(this.listQuery);
      this.listLoading = false;
      this.datas = res;
      const res_prepay = await getPrepaymentList(this.listQuery);
      if(res_prepay.return_code === 0){
        this.datas.push(res_prepay);
      }

      const res_points = await getCustomerPointsList(this.listQuery);

      if(res_points.return_code === 0){
        if(res_points.results.length > 0){
          this.datas.push(...res_points.results)
        }
      }

    },
    //格式化
    dataFormatter(row, column, cellValue, index) {
      if (
        column.property == "total_amount" ||
        column.property == "amount" ||
        column.property == "norecv_amount" 
      ) {
        return cellValue && cellValue.toFixed(2);
      } else {
        return cellValue;
      }
    },

    // 查询
    handleFilter() {
      this.getSaleOrderList();
    },

    handleSelectionChange(val) {
      this.selections = val;
    },
  },
};
</script>

<style lang='scss'>
.goods {
  .el-aside {
    .el-tree {
      border: 1px solid #eee;
      padding: 10px;
    }
    .el-tree-node__label {
      font-size: 12px;
    }
  }
  .el-form {
    margin-top: -30px;
    .el-form-item {
      margin-bottom: 0px !important;
    }
  }
}
</style>